<template>
	<div class="manageinfo">
		<div class="search">
			<el-input placeholder="请输入用户名" v-model="adminName" @keyup.native.enter="Searchinfo"></el-input>
			<el-input placeholder="请输入联系方式" v-model="adminPhone" @keyup.native.enter="Searchinfo"></el-input>
			<el-button @click="Searchinfo" class="searchBtn" type="info" :icon="Search" >搜索</el-button>
			<el-button @click="add" class="addBtn" type="info" :icon="CirclePlus">添加</el-button>
		</div>
		<div class="chart">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="iserIcon" label="头像">
					<template  #default="scope">
						<img style="width:50px;height:50px;object-fit: cover;" :src="baseUrl+scope.row.iserIcon"/>
					</template>
				</el-table-column>
				<el-table-column prop="adminName" label="用户名"  />
				<el-table-column prop="adminAccount" label="账号" />
				<el-table-column prop="adminPhone" label="联系方式" />
				<el-table-column label="操作">
					<template #default = "score">
						<el-button type="primary" style="width: 50px;" @click="updateadmin(score.row.adminId)">修改</el-button>
						<el-button type="danger" style="width: 50px;" @click="del(score.row.adminId)" >删除</el-button>
					</template>
				</el-table-column>
			  </el-table>
			  <el-pagination
				layout="prev,pager,next"
				:page-count="total"
				:page-size="pageSize"
				v-model:current-page="pageIndex"	
				@current-change="changePage"
			  ></el-pagination>
		</div>
		<!-- 添加管理员信息 -->
		<el-dialog v-model="centerDialogVisible" title="添加管理员" width="400" left>
			<el-form
			ref="myForm"
			:model="formData"
			:rules="rules"
			style="width:100%;margin-top: 20px;"
			hide-required-asterisk=true
			>	<el-form-item prop="file" label="选择头像:" label-width="100" style="width:80%">
					<el-upload
						:action="baseUrl+'admin/addAdmin'"
					    :data="myData" 
						:show-file-list="false"
						:auto-upload="false"
					    list-type="picture-card"
					    :on-change="handleChange"
					    :before-upload="beforeAvatarUpload"
					  >
					    <el-icon v-if="!imageUrl"><Plus /></el-icon>
						<img slot="trigger" v-if="imageUrl" :src="formData.imageUrl" class="avatar">
					</el-upload>
				</el-form-item>
				<el-form-item prop="adminName" label="用户名:" label-width="100" style="width:80%">
					<el-input v-model="formData.adminName" placeholder="请输入用户名" style="width:205px"></el-input>
				</el-form-item>
				<el-form-item prop="adminAccount" label="账号:" label-width="100" style="width:80%">
					<el-input v-model="formData.adminAccount" placeholder="请输入账号" style="width:205px" ></el-input>
				</el-form-item>
				<el-form-item prop="adminPassword" label="密码:" label-width="100" style="width:80%">
					<el-input type="password" v-model="formData.adminPassword" placeholder="请输入密码" style="width:205px" ></el-input>
				</el-form-item>
				<el-form-item prop="adminPhone" label="联系方式" label-width="100" style="width:80%">
					<el-input v-model="formData.adminPhone" placeholder="请输入联系方式" style="width:205px"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
			  <div class="dialog-footer">
				<el-button style="background: #0f6ab1;" type="primary" @click="sure(myForm)">确认</el-button>
				<el-button type="info" style="background: #999;"  @click="clearadmininfo(myForm)">取消</el-button>
			  </div>
			</template>
		</el-dialog>
		<!-- 修改管理员信息 -->
		<el-dialog v-model="DialogVisible" title="修改管理员" width="400" left>
			<el-form
			ref="myForm"
			:model="formupdate"
			:rules="rules"
			style="width:100%;margin-top: 20px;"
			hide-required-asterisk=true
			>	
				<el-form-item prop="file" label="选择头像:" label-width="100" style="width:80%">
					<el-upload
						:action="formupdate.imageUrlS"
					    :data="myData" 
						:show-file-list="false"
						:auto-upload="false"
					    list-type="picture-card"
					    :on-change="updatehandleChange"
					    :before-upload="beforeAvatarUpload"
					  >
					<img slot="trigger" :src="baseUrl2+formupdate.imageUrlS" class="avatar">
					</el-upload>
				</el-form-item>
				<el-form-item prop="adminName" label="用户名:" label-width="100" style="width:80%">
					<el-input v-model="formupdate.adminName" placeholder="请输入用户名" style="width:205px" ></el-input>
				</el-form-item>
				<el-form-item prop="adminAccount" label="账号:" label-width="100" style="width:80%">
					<el-input v-model="formupdate.adminAccount" placeholder="请输入账号" style="width:205px"></el-input>
				</el-form-item>
				<el-form-item prop="adminPassword" label="密码:" label-width="100" style="width:80%">
					<el-input type="password" v-model="formupdate.adminPassword" placeholder="请输入密码" style="width:205px"></el-input>
				</el-form-item>
				<el-form-item prop="adminId" label="管理员id:" label-width="100" style="width:80%">
					<el-input  v-model="formupdate.adminId"  style="width:205px" disabled></el-input>
				</el-form-item>
				<el-form-item prop="adminPhone" label="联系方式" label-width="100" style="width:80%">
					<el-input v-model="formupdate.adminPhone" placeholder="请输入联系方式" style="width:205px" ></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
			  <div class="dialog-footer">
				<el-button style="background: #0f6ab1;" type="primary" @click="sureupdate(myForm)">确认</el-button>
				<el-button type="info" style="background: #999;"  @click="DialogVisible=false">取消</el-button>
			  </div>
			</template>
		</el-dialog>
	</div>
	
	<!-- 删除提示框 -->
	<el-dialog v-model="delDialogVisible"  width="400" center>
		<p style="text-align: center;">
		 确认删除该信息
		</p>
		<template #footer>
		  <div class="dialog-footer">
			<el-button style="background: #0f6ab1;" type="primary" @click="sureDel">确认</el-button>
			<el-button type="info" style="background: #999;"  @click="delDialogVisible = false">取消</el-button>
		  </div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import {ref,reactive} from "vue"
	import { Search,CirclePlus,ArrowRight,Plus} from '@element-plus/icons-vue';
	import {admininfo,searchadmininfo,addadmininfo,adminchangeinfo,adminfindinfo,
	infodel} from "../api/zhy"
	import {baseUrl} from "../utils/request.ts"
	import { ElMessage,ElMessageBox} from 'element-plus'
	let active1=ref(1)
	let active2=ref(1)
	let total=ref(0)
	let tableData=ref([])
	let tablestore=ref([])
	let pageSize=ref(5)
	let pageIndex=ref(1)
	let adminName=ref()
	let adminPhone=ref()
	let adminF=ref(true)
	let imageUrl=ref()
	let imageUrlS=ref()
	let storeimageUrl=ref()
	let myData=reactive({})
	let totals=ref(0)
	let addflag=ref<boolean>(true)
	let updateflag=ref<boolean>(false)
	let baseUrl2=baseUrl;
	let myForm=ref(null);
	let myForms=ref(null)
	let imgqian=baseUrl+'images/store/'
	// let storeimgurl=ref()
	let baseUrls=baseUrl
	let formData=reactive({
		imageUrl:"",
		adminName:"",
		adminAccount:"",
		adminPhone:"",
		adminPassword:"",
	});
	let formupdate=reactive({
		imageUrlS:"",
		adminName:"",
		adminAccount:"",
		adminPhone:"",
		adminId:"",
		adminPassword:"",
	})
	let centerDialogVisible=ref(false)
	const manage=()=>{
		active1.value=1
		active2.value=1
		adminF.value=true
	}
	//管理员信息
	const initadmininfo=async()=>{
		let res=await admininfo({
			pageSize:Number(pageSize.value),
			pageIndex:pageIndex.value,
		})
		tableData.value=res.context
		total.value=res.pageTotal
		// console.log(res.context,res.pageTotal)
	}
	initadmininfo()
	// 搜索管理员信息
	const Searchinfo=async()=>{
		let res=await searchadmininfo({
			adminName:adminName.value,
			adminPhone:adminPhone.value,
			pageSize:pageSize.value,
			pageIndex:pageIndex.value,
		})
		// console.log(res,"搜索管理员信息")
		tableData.value=res.context
		pageIndex.value=res.pageIndex
		total.value=res.pageTotal
	}
	//添加管理员信息
	const add=()=>{
		centerDialogVisible.value=true
	}
	//头像
	let files=ref();
	const handleChange=(file,fileList)=>{
		console.log(file,"文件")
		files.value=file.raw
		formData.imageUrl = URL.createObjectURL(file.raw);
		imageUrl.value=formData.imageUrl.substring(4,formData.imageUrl.length)
		console.log(imageUrl)
	}
	const beforeAvatarUpload=(file)=>{
		const isJPG = (file.type == "image/jpg" || file.type == "image/jpeg" || file.type == "image/png" || file.type == "image/gif");
		const isLt2M = file.size / 1024 / 1024 < 2;
	
		if (!isJPG) {
			ElMessage.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
		}
		if (!isLt2M) {
			ElMessage.error('上传头像图片大小不能超过 2MB!');
		}
		return isJPG && isLt2M;
	}
	const sure=async(formEl)=>{
		formEl.validate(async(valid)=>{
			if(valid){
				let res=await addadmininfo({
					file:files.value,
					adminName: formData.adminName,
					adminAccount:formData.adminAccount,
					adminPhone:formData.adminPhone,
					adminPassword: formData.adminPassword
			})
					initadmininfo()
					centerDialogVisible.value=false
					ElMessage.success("信息添加成功")
			}
			})
			}
	//修改管理员信息
	let DialogVisible=ref(false)
	//点击修改弹窗
	const updateadmin=async(id)=>{
		DialogVisible.value=true
		let res=await adminfindinfo({
			adminId:id,
		})
		// console.log(res[0],"修改........")
		Object.assign(formupdate,res[0])
		formupdate.imageUrlS=res[0].iserIcon
		baseUrl2=baseUrl
		// console.log(formupdate.imageUrlS)
	}
	let adminupdatefile=ref()
	const updatehandleChange=async(file, fileList)=>{
		formupdate.imageUrlS = URL.createObjectURL(file.raw);
		adminupdatefile.value=file.raw
		imageUrlS=formupdate.imageUrlS.substring(4,formupdate.imageUrlS.length)
		baseUrl2=""
	}
	const sureupdate=async()=>{
		let res=await adminchangeinfo({
			file:adminupdatefile.value,
			adminName:formupdate.adminName,
			adminAccount:formupdate.adminAccount,
			adminPhone:formupdate.adminPhone,
			adminId:formupdate.adminId,
			adminPassword:formupdate.adminPassword,
		})
		DialogVisible.value=false
		initadmininfo()
		ElMessage.success("信息修改成功")
	}
	//点击分页器
	const changePage=(page)=>{
		//console.log(page)
		pageIndex.value=page;
		initadmininfo()
	}
	let delDialogVisible=ref(false)
	let adminId=ref()
	//删除管理员
	const del=async(id)=>{
		delDialogVisible.value=true
		adminId.value=id
	}
	const sureDel=async()=>{
		let res=await infodel({
			adminId:adminId.value,
		})
		initadmininfo()
		delDialogVisible.value=false
		ElMessage.success("信息删除成功")
	}
	//点击取消清空数据
	const clearadmininfo=(formData)=>{
		imageUrl.value=""
		formData.resetFields()
		centerDialogVisible.value=false
	}
	// 要验证那些数据  是否必填 提示信息 失去焦点时提示
		let rules=reactive({
			// file:[
			// 	{required:true,message:"头像不能为空",trigger:"blur"}
			// ],
			adminName:[
				{required:true,message:"用户名不能为空",trigger:"blur"}
			],
			adminAccount:[
				{required:true,message:"账号不能为空",trigger:"blur"}
			],
			adminPassword:[
				{required:true,message:"密码不能为空",trigger:"blur"}
			],
			adminPhone:[
				{ required: true, message: '联系方式不能为空', trigger: 'blur' },
				{ pattern:/^1([3-9])\d{9}$/, message: '请输入正确手机号', trigger: 'blur' },
			],
		})
</script>

<style scoped lang="less">
	.search{
		width:100%;
		// height: 40px;
		margin-top:10px;
	}
	.el-input{
	    width: 150px;
		// height: 40px;
	    margin-right:30px;
	    border: none;
	 }
	 .searchBtn{
	     background-color: #106ab1;
	    border: none;
		// height: 40px;
	 }
	 .addBtn{
	    background-color: #00a0e9;
	    border: none;
	    float: right;
	    margin-right: 20px;
		// height: 40px;
	 }
	 :deep(.el-table tr){
	 	height: 80px;
	 }
	 :deep(.el-table .el-table__cell){
	 	text-align: center !important;
	 }
	 // 分页样式
	.el-pagination{
		--el-pagination-bg-color:none;
		--el-pagination-button-disabled-bg-color:none;
		justify-content: center;
	}
	 img {
		width:100%;
		height:100%;
		border-radius:50%;
		object-fit: cover;
	}
</style>